import 'package:city_corner/commons/global-var.dart';
import 'package:city_corner/main-page/filter-panel/rent-panel/drag-btn.dart';
import 'package:city_corner/main-page/filter-panel/rent-panel/progress.dart';
import 'package:flutter/cupertino.dart';

import '../opt-list.dart';

class RentPanel extends StatefulWidget {
  @override
  _RentPanelState createState() => _RentPanelState();
}

class _RentPanelState extends State<RentPanel> {
  List rentList = [
    {'label': '不限', 'min': 0, 'max': 8000},
    {'label': '600以下', 'min': 0, 'max': 600},
    {'label': '600 - 1000元', 'min': 600, 'max': 1000},
    {'label': '1000 - 1500元', 'min': 1000, 'max': 1500},
    {'label': '1500 - 2000元', 'min': 1500, 'max': 2000},
    {'label': '2000 - 3000元', 'min': 2000, 'max': 3000},
    {'label': '3000 - 5000元', 'min': 3000, 'max': 5000},
    {'label': '5000 - 8000元', 'min': 5000, 'max': 8000},
    {'label': '8000元以上', 'min': 8000, 'max': 8000},
  ];
  Map curRent = {};
  bool reverse = false;
  double startX = 0;
  double endX = 0;

  @override
  Widget build(BuildContext context) {
    double mediaWidth = mediaSize(context).width;
    double left = 60;
    double progressWidth = mediaWidth - left;

    void setDragBtnPos(int index) {
      int min = rentList[index]['min'];
      int max = rentList[index]['max'];
      double _startX = min / 8000 * progressWidth;
      double _endX = max / 8000 * progressWidth;
      setState(() {
        startX = _startX == progressWidth ? progressWidth : _startX + left;
        endX = _endX == progressWidth ? progressWidth : _endX + left;
      });
      // print('position: ' + startX.toString() + ' ' + endX.toString());
    }

    onPressed(index) {
      setState(() {
        curRent = rentList[index];
      });
      setDragBtnPos(index);
    }

    void setRange(type, val) {
      if (type == 'endX') {
        setState(() {
          endX = val;
        });
      } else {
        setState(() {
          startX = val;
        });
      }
    }

    return Column(
      children: [
        Container(
            child: OptList(opts: rentList, onPressed: onPressed),
            height: widgetHeight['houseList'] - 140),
        Container(
            height: 50,
            child: Stack(children: [
              CustomPaint(
                  painter: Progress(
                      p1: Offset(left, 10),
                      p2: Offset(progressWidth, 10),
                      color: '0xffe2e2e2'),
                  size: Size(mediaWidth, 30)),
              DragBtn(
                  startX: startX,
                  endX: endX,
                  minX: left,
                  maxX: progressWidth,
                  setRange: setRange),
              DragBtn(
                  startX: startX,
                  endX: endX,
                  minX: left,
                  maxX: progressWidth,
                  reverse: true,
                  setRange: setRange)
            ])),
        Row(
          children: [
            Text((startX / progressWidth * 8000).toInt().toString() +
                '~' +
                (endX / progressWidth * 8000).toInt().toString()),
          ],
          mainAxisAlignment: MainAxisAlignment.center,
        )
      ],
    );
  }
}
